.icon {
  background-size: cover;
}
.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 225px;
  background: linear-gradient(#5C6BC0, #7986CB);
}
.top .icon {
  width: 75px;
  height: 75px;
  background-image: url("data:image/svg+xml,%3Csvg t='1647950744800' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='10830' width='64' height='64'%3E%3Cpath d='M0.00001 512.077A511.923 511.923 0 1 0 511.92301 0 511.974 511.974 0 0 0 0.00001 512.077z' fill='%23FFFFFF' p-id='10831'%3E%3C/path%3E%3Cpath d='M887.49001 857.89c-13.697-71.82-139.895-140.459-253.165-177.96-5.54-1.846-40.014-17.339-18.417-82.798 56.43-57.815 99.214-150.924 99.214-242.597 0-140.82-93.827-214.742-202.891-214.742s-202.635 73.82-202.635 214.742c0 91.98 42.784 185.45 99.317 243.162 22.059 57.712-17.34 79.207-25.65 82.08-107.73 38.834-232.903 107.73-246.702 177.96a511.307 511.307 0 1 1 887.49-346.635 507.87 507.87 0 0 1-136.56 346.788' fill='%23B8D4FF' p-id='10832'%3E%3C/path%3E%3C/svg%3E");
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(18, 18, 18, 0.2);
}
.top .title {
  color: #fff;
  font-size: 16px;
  margin-top: 15px;
}
.main {
  margin: -40px 15px 0 15px;
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(18, 18, 18, 0.2);
}
.main .content {
  padding-top: 5px;
}
.main .content .user,
.main .content .password {
  display: flex;
  align-items: center;
  height: 55px;
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}
.main .content .user .icon,
.main .content .password .icon {
  width: 17px;
  height: 17px;
  margin-right: 10px;
}
.main .content .user input,
.main .content .password input {
  font-size: 16px;
  flex: 1;
}
.main .content .user .icon {
  background-image: url("data:image/svg+xml,%3Csvg t='1647952796463' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='11756' width='32' height='32'%3E%3Cpath d='M504.59685925 253.55757036m-207.0452148 0a207.04521482 207.04521482 0 1 0 414.09042963 0 207.04521482 207.04521482 0 1 0-414.09042963 0Z' p-id='11757' fill='%238a8a8a'%3E%3C/path%3E%3Cpath d='M856.54945185 647.38038517C656.42192592 519.8279111 658.4850963 519.8279111 514.42725925 519.8279111c-141.63057778 0-141.99466667 0-358.02074073 132.64971852-47.81700741 31.7970963-75.85185185 188.59804445-75.85185185 230.22554074 0 108.86257778 192.48165925 78.88592592 429.86761481 78.88592593s429.86761482 29.97665185 429.86761482-78.88592593c0.12136297-43.93339259-31.06891852-202.67614815-83.74044445-235.32278519z' p-id='11758' fill='%238a8a8a'%3E%3C/path%3E%3C/svg%3E");
}
.main .content .password .icon {
  background-image: url("data:image/svg+xml,%3Csvg t='1647952928187' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='13066' width='32' height='32'%3E%3Cpath d='M822.857143 402.285714h-36.571429v-128a274.285714 274.285714 0 0 0-548.571428 0v128h-36.571429a109.714286 109.714286 0 0 0-109.714286 109.714286v91.428571a420.571429 420.571429 0 0 0 841.142858 0v-91.428571a109.714286 109.714286 0 0 0-109.714286-109.714286z m-475.428572-128a164.571429 164.571429 0 0 1 329.142858 0v128H347.428571z m201.142858 457.142857a36.571429 36.571429 0 0 1-73.142858 0v-146.285714a36.571429 36.571429 0 0 1 73.142858 0z' p-id='13067' fill='%238a8a8a'%3E%3C/path%3E%3C/svg%3E");
}
.main .line {
  height: 1px;
  background-color: #eee;
  margin: 15px 5px 5px 5px;
}
.main .button {
  margin: 15px 15px;
}
.main .button .register,
.main .button .login {
  width: 100%;
  height: 45px;
  background-color: #7986CB;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom: 15px;
  border: none;
}
.main .button .login {
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.2);
}
.main .button .register {
  background-color: #fff;
  border: 2px solid #7986CB;
  color: #5C6BC0;
}
